<!DOCTYPE html>
<html lang="en">
<head>

    <!--新闻类型增删改查-->
    <!--新闻类型增删改查-->
    <!--新闻类型增删改查-->

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <style type="text/css">
        .demo-input-suffix{ margin-left: 20px;
            margin-top: 10px;
        }
        .col-md-8{
            margin-left: 250px;
            border-radius: 10px;
        }
        .a1{
            margin-bottom: 50px ;
            width: 100px;
            height: 39px;
        }
        body{background-image: url("https://img1.baidu.com/it/u=1https://img0.baidu.com/it/u=1077257707,855832289&fm=26&fmt=auto");}
    </style>
</head>
<body>
<div id="app">
    <el-input
            placeholder="请输入类型"
            prefix-icon="el-icon-search"
            style="display: inline-block; width: 200px;"
            v-model="searchInfo.tname">
    </el-input>

    <el-button class="a1" type="primary" plain icon="el-icon-search"  @click="searchType()">搜索</el-button>
    <el-button type="success" plain icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加</el-button>

    <template>
        <el-table
                :data="typeArr"
                border
                style="width: 100%"
        >
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="tname"
                    label="新闻类型">
            </el-table-column>

            <el-table-column
                    prop="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="danger"  size="small" @click="deletenews(scope.row.id)" >删除</el-button>
                    <el-button type="primary"  size="small" @click="showUpdateDialog(scope.row.id)" >编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            style="margin:  0  auto"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <el-dialog title="添加新闻类型" :visible.sync="dialogTableVisible" style="width: 900px; margin:  0 auto;">

        <el-form :model="tnameInfo" :rules="rules">

            <el-form-item prop="tname">
                <el-input v-model="tnameInfo.tname" placeholder="请输入类型名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addTname()">提交</el-button>
                <el-button @click="dialogTableVisible= false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <el-dialog title="修改新闻类型" :visible.sync="updateDialogTableVisible" style="width: 900px; margin:  0 auto;">

        <el-form :model="tnameInfo" :rules="rules">

            <el-form-item prop="tname">
                <el-input v-model="tnameInfo.tname" placeholder="请输入类型名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="updateTname()">提交</el-button>
                <el-button @click="updateDialogTableVisible= false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            searchInfo:{},
            typeArr:[],
            totalCount:0,
            tnameInfo:{},
            dialogTableVisible:false,
            updateDialogTableVisible:false,

            rules: {
                tname: [
                    { required: true, message: '请输入新闻类型', trigger: 'blur' },
                ]
            },
        },
        methods:{

            // 修改（不允许被修改成已有类型）
            updateTname(){
                $.post("/ssm/type/update",haha.tnameInfo,function (backData) {
                     if(backData.code == 1){
                        haha.$message({
                            message: '恭喜你，添加成功',
                            type: 'success',
                        });
                    }else if(backData.code == 2) {
                        haha.$message.error('警告！重复类型！')
                    }
                    haha.updateDialogTableVisible=false;
                    getData(1,10);
                })
            },


            // 添加（不允许添加已有类型）
            addTname(){
              $.post("/ssm/type/add",haha.tnameInfo,function (backData) {
                  if(backData.code == 1){
                      haha.$message({
                          message: '恭喜你，添加成功',
                          type: 'success',
                      });
                  }else if(backData.code == 2) {
                      haha.$message.error('警告！重复类型！')
                  }

                  haha.dialogTableVisible=false;
                  getData(1,10);
              })
            },

            // 删除
            deletenews(id){
                haha.$confirm('此操作将永久删除该类型, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/type/delete/" + id, function (backData) {
                        if (backData.code == 2) {
                            haha.$message({
                                message: '恭喜你，删除成功',
                                type: 'success',
                            });
                            getData(1, 10)
                        }else {
                            haha.$message({
                                message: '删除失败',
                                type: 'warning',
                            });
                        }
                    });
                });
            },

            showUpdateDialog(id){
                $.get("/ssm/type/get/"+id,function (backData) {
                    haha.tnameInfo =  backData.data;
                    haha.updateDialogTableVisible =true;
                })
            },

            searchType(){
                getData(1,10);
            },
            handleCurrentChange(val){
                getData(val,10);
            }
        }
    });

    function getData(a,b){
        haha.searchInfo.pageNo= a;
        haha.searchInfo.pageCount=b;
        $.post("/ssm/type/leixingsousuo",haha.searchInfo,function(backData){
            haha.typeArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCountNews;
        })
    }
    getData(1,10);
</script>
</body>
</html>